<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS实例</title>
    <style>
        #out{
            width:800px;
            margin:100px auto;
            border:1px solid #333;
            height:40px;
        }
        #in{
            height:40px;
            background-color:#ccc;
            width:0%;
        }
    </style>
</head>
<body>
    <h1>进度条</h1>
    <hr>
    <div id="out">
        <div id="in"></div>
    </div>
    <script>
        //获取 div
        var div = document.getElementById('in');
        //设置定时函数
        var timer = setInterval(run, 100);
        //声明循环变量
        var m = 0;
        //声明 定时 的函数
        function run(){
            //判断定时结束
            if (m >= 100) {
                clearInterval(timer);
                return;
            }
            m ++;
            div.style.width = m+'%';
        }
    </script>
</body>
</html>